<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-container">
      <!-- 
        和menu菜单组件一样
       -->
      <button class="layui-btn" id="btn">
        下拉菜单
        <i class="layui-icon layui-icon-down layui-font-12"></i>
      </button>
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script>
      layui.use(["dropdown"], function () {
        var dropdown = layui.dropdown;
        dropdown.render({
          elem: "#btn",
          trigger: "contextmenu", // click/hover/mousedown/contextmenu(右键)
          show: true, // 是否初始即显示组件面板
          // isAllowSpread: false, //	是否允许菜单组(group)展开收缩 设置为false全部展开
          // isSpreadItem: false, // 是否初始展开子菜单
          // delay: 300, // 延迟关闭的毫秒数。当 trigger 为 hover 时才生效
          // className: "", //	自定义组件的样式类名
          // style: "", // 设置组件的 style 属性，从而定义新的样式
          // templet: '', // 全局定义菜单的列表模板，添加任意 html 字符
          content: "", // 自定义组件内容，从而替代默认的菜单结构
          ready: function (elemPanel, elem) {
            // 组件成功弹出后的回调
            console.log(elemPanel); // 得到组件面板的 DOM 对象
            console.log(elem); // 得到基础参数 elem 所绑定的元素 DOM 对象
          },
          click: function (data, othis) {
            // 菜单项被点击时的回调
            console.log(data); // 得到当前所点击的菜单项对应的数据
            console.log(othis); // 得到当前所点击的菜单项 DOM 对象
            console.log(this.elem); //得到当前组件绑定的原始 DOM 对象，批量绑定中常用。
          },

          data: [
            //当设定了模板时，菜单项将优先显示模板结构；否则将默认显示标题
            { title: "菜单1", id: 100, href: "#", templet: '<i class="layui-icon layui-icon-refresh"></i> {{d.title}}' },
            { title: "菜单2", id: 101, href: "#", target: "_blank" },
            { type: "-" },
            {
              title: "菜单3",
              id: 102,
              type: "group", //菜单类型，支持：normal/group/parent/-
              child: [
                {
                  title: "菜单3-1",
                  id: 103,
                },
                {
                  title: "菜单3-2",
                  id: 104,
                },
              ],
            },
            { type: "-" },
            {
              title: "菜单4",
              id: 105,
              type: "parent", //菜单类型，支持：normal/group/parent/-
              child: [
                {
                  title: "菜单4-1",
                  id: 106,
                },
                {
                  title: "菜单4-2",
                  id: 107,
                },
              ],
            },
          ],
        });
      });
    </script>
  </body>
</html>
